<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局练习07</title>
    <style>
      body,
      div,
      ul {
        margin: 0;
        padding: 0;
      }

      .clearFix::after {
        content: "";
        clear: both;
        display: block;
      }

      .container {
        width: 1000px;
        /* height: 1500px; */
        /* border: 1px solid #f00; */
        margin: 30px auto 0;
      }

      /*header {
         border: 2px solid #0f0; 
         overflow: hidden; 
      }*/

      header .col1 {
        width: 700px;
        height: 300px;
        background-color: #fe1800;
        float: left;
      }

      header .col2 {
        width: 280px;
        height: 300px;
        background-color: #fff000;
        float: right;
      }

      main {
        /* border: 2px solid #f0f; */
        margin-top: 20px;
      }

      main .col3 {
        width: 200px;
        height: 300px;
        background-color: #ffe5c1;
        float: left;
      }

      main .col4 {
        width: 360px;
        height: 300px;
        background-color: #ff5201;
        float: left;
        margin-left: 20px;
      }

      main .col5 {
        width: 400px;
        height: 300px;
        background-color: #0190fa;
        float: right;
      }

      section {
        /* border: 2px solid #00f; */
        margin-top: 20px;
      }

      section ul {
        list-style: none;
      }

      section ul li {
        width: 190px;
        height: 200px;
        background-color: #77e300;
        margin: 5px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="clearFix">
        <div class="col1"></div>
        <div class="col2"></div>
      </header>

      <main class="clearFix">
        <div class="col3"></div>
        <div class="col4"></div>
        <div class="col5"></div>
      </main>

      <section class="clearFix">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </div>
  </body>
</html>
